<template>
  <!-- 增加静音属性：muted -->
  <video
      id="myVideo"
      controls
      style="width:100%;height: 100%;object-fit: fill;"
      ref="flvPlayerRef"
  ></video>
</template>

<script setup lang="ts">
/* eslint-disable */
import {ref, onMounted, onUnmounted} from 'vue';
import FlvExtend from 'flv-extend'

const props = defineProps<{
  videoSrc: string;
  duration: number
}>();

const flvPlayer = ref<any>(''); // 要声明一个播放器的容器  flvPlayer
const flvPlayerRef = ref()
onMounted(() => {
  //在mounted声明周期里调用 如果出现DOM没加载出来的原因 可以使用定时器
  videoPlayer();
});

const decodedFrames = ref(0);
const videoPlayer = () => {
  const videoElement:any = document.getElementById('video')

// 配置需要的功能
  const flv = new FlvExtend({
    element : videoElement, // *必传
    frameTracking: true, // 开启追帧设置
    updateOnStart: true, // 点击播放后更新视频
    updateOnFocus: true, // 获得焦点后更新视频
    reconnect: true, // 开启断流重连
    reconnectInterval: 0 // 断流重连间隔
  })

// 调用 init 方法初始化视频
// init 方法的参数与 flvjs.createPlayer 相同，并返回 flvjs.player 实例
  flvPlayer.value = flv.init(
      {
        type: 'flv',
        url: props.videoSrc,
        isLive: false
      },
      {
        enableStashBuffer: true, // 如果您需要实时（最小延迟）来进行实时流播放，则设置为false
        autoCleanupSourceBuffer: true, // 对SourceBuffer进行自动清理
        stashInitialSize: 128, // 减少首帧显示等待时长
        enableWorker: true // 启用分离的线程进行转换
      }
  )
  setTimeout(()=>{
    flvPlayer.value.play()
  },200)
}


const destoryPlayer = () => {
  if (flvPlayer.value) {
    flvPlayer.value.pause();
    flvPlayer.value.unload();
    flvPlayer.value.detachMediaElement();
    flvPlayer.value.destroy();
    flvPlayer.value = null;
  }
}
// 在销毁的声明周期中  必须要销毁掉播放器的容器！！！！不然会占用TCP个数，导致其他页面的监控也播放不了
onUnmounted(() => {
  destoryPlayer()
});

defineExpose({
  videoPlayer
});
</script>

<style lang="scss" scoped>
video {
  height: 100%;
  width: 100%;
}
</style>


